<template>
  <div class="invite-friends">
    <div class="invitation-cnt" id="share-box">
      <div class="title-box">
        <div class="title">邀请好友</div>
        <p class="sub-title">
          全景看房 - AI拓客 - 裂变传播 - 监控意向
          <br />连接客户更简单
        </p>
      </div>
      <div class="agent-box">
        <p class="pic">
          <img :src="userInfo.avatarUrl" alt />
        </p>
        <p class="name">{{userInfo.name}}</p>
        <p class="text">邀请你加入{{invitation.appName}}</p>
      </div>
      <div class="qrcode-box">
        <p class="qrcode" id="qrcode"></p>
        <p class="text">长按二维码，关注微信公众号</p>
      </div>
    </div>
    <div class="record" v-show="showRecord" @click="goRecord">
      查看邀请记录
      <i class="iconfont icon-wode-erjizhe"></i>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { uuid } from '@/utils/tool'
import { mapGetters } from 'vuex'
import wechatService from 'SERVICE/wechatService'
export default {
  data() {
    return { friendShareData: '', timelineShareData: '', shareUuid: '', invitation: {}, showRecord: false }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.shareUuid = uuid()
  },
  methods: {
    getInvitationUrl() {
      wechatService
        .getInvitationUrl({
          agentId: this.userInfo.agentId,
          enterpriseId: localStorage.getItem('enterpriseId'),
          uuid: localStorage.getItem('uuid')
        })
        .then(res => {
          this.invitation = res
          this.getQrcode(res.invitationUrl.replace('register?', 'register2?'))
          this.showRecord = res.invitation
        })
        .catch()
    },
    getQrcode(url) {
      let qrcode = new QRCode('qrcode', {
        width: 240,
        height: 240, // 高度
        text: url, // 二维码内容
        image: '',
        render: 'table' // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas） // background: '#f0f' // foreground: '#ff0'
      })
    },
    goRecord() {
      this.$router.push('/wx/record')
    },
    // 设置分享
    setShare() {
      let host = process.env.VUE_APP_APP_URL
      let uuid = localStorage.getItem('uuid')
      let appid = localStorage.getItem('appid')
      host = `${host}#/wx/invite/register2?parentUserId=${this.userInfo.agentId}&enterpriseId=${this.userInfo.enterpriseId}&shareUuid=${this.shareUuid}&uuid=${uuid}&appid=${appid}`
      this.timelineShareData = this.friendShareData = {
        title: '注册就送你现金红包，先到先得，猛戳我领取！',
        desc: 'AW大师公众号',
        imgUrl: 'https://720ljq2test-10037467.file.myqcloud.com/header/qrcode/6b07b87ac760401e9e12bebafedc3df9.png',
        link: host
      }
      this.friendShareData.success = this.timelineShareData.success = this.articleShare
      this.friendShareData.cancel = this.timelineShareData.cancel = this.articleShare
      window.awHelper.wechatHelper.setShare(this.friendShareData, this.timelineShareData)
    },
    // 分享成功之后
    articleShare() {
      setTimeout(() => {
        this.shareUuid = uuid()
      }, 500)
    }
  },
  mounted() {
    this.getInvitationUrl()
    this.setShare()
  }
}
</script>


<style lang="less" scoped>
.invite-friends {
  font-size: 14px;
  color: #fff;
  background-color: #009de6;
  padding-bottom: 100px;
  .invitation-cnt {
    background: #009de6 url('../../../assets/img/wx/invitation2.png') no-repeat left top;
    background-size: 100% auto;
    padding-bottom: 20px;
  }
  .title-box {
    padding: 32px 20px 0;
    .title {
      height: 56px;
      font-size: 40px;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
      line-height: 56px;
    }
    .sub-title {
      font-size: 16px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 22px;
      margin-top: 12px;
    }
  }
  .agent-box {
    display: flex;
    align-items: center;
    padding: 50px 20px 16px;
    font-size: 16px;
    .pic {
      width: 36px;
      height: 36px;
      margin-right: 8px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .name {
      margin-right: 5px;
    }
  }
  .qrcode-box {
    margin: 20px;
    background-color: #fff;
    height: 350px;
    border-radius: 12px;
    padding-top: 40px;
    .qrcode {
      width: 226px;
      height: 226px;
      margin: 0 auto;
      /deep/ img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      color: #40516f;
      margin-top: 18px;
      text-align: center;
    }
  }
  .record {
    text-align: center;
    color: #fff;
  }
}
</style>